<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FaceMox</title>
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/menu/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/menu/css/main.css">
</head>
<body oncontextmenu = "return false">
	<div class="root">
	
	    <!-- Header S  -->
		<div class="header">
			<a href="/"><div class="logo">FaceMox</div></a>
			<div class="action">
				<input id="add_project" class="button-default" type="button" value="添加项目">&nbsp;➜
				<input id="add_module" class="button-default" type="button" value="添加模块">&nbsp;➜
				<input id="add_env_config" class="button-default" type="button" value="环境配置">&nbsp;➜
				<input id="add_authorization" class="button-default" type="button" value="授权认证">&nbsp;➜
				<input id="authorization_center" class="button-default" type="button" value="授权管理">&nbsp;➜
				<!-- <input id="f5" class="button-f5" type="button"  value="F5刷新">&nbsp;➜ -->
				<input id="add_interface" class="button-default" type="button" value="添加接口">&nbsp;➜
				<input id="global_parameter" class="button-default" type="button" value="全局参数">&nbsp;➜
				<input id="link_test" class="button-default" type="button" value="添加链路">&nbsp;➜
				<input id="link_list" class="button-default" type="button" value="链路中心">&nbsp;➜
				<input id="server_monitor" class="button-default" type="button" value="服务监测">&nbsp;➜
				<input id="about_sys" class="button-default" type="button" value="关于系统">
			</div>
		</div>
		<!-- Header E  -->
		
		<!-- Main S -->
		<div class="content">
		
		    <!-- Left Nav S -->
			<div class="left">
				<div>
					<div id="lists" class="VerticalMenu">
						
						<div>
							<div name="menu">
								<span>Dashboard</span><i class="glyphicon glyphicon-chevron-right"></i>
							</div>
							<div name="menu" id="dashboard">
								<div>
									<div>
										<span>统计分析概览</span>
									</div>
								</div>
							</div>
						</div>
						
						<#list projectList as project>
						<div>
							<div>
								<span>${project.projectName}</span><i class="glyphicon glyphicon-chevron-right"></i>
							</div>
							<div name="menu" class="menu">
							    <#list moduleList as module>
							    <#if "${project.projectId}" == "${module.projectId}">
								<div>
									<span style="display:inline-block;width:100%;height:100%;-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;" class="module_n" name="${module.moduleId}">${module.moduleName}</span>
								</div>
								</#if>
								</#list>
							</div>
						</div>
						</#list>
						
					</div>
				</div>
			</div>
			<!-- Left Nav E -->
			
			<!-- Right Content S -->
			<div class="right">
				<div id="right-content" class="right-content">
				    
				    <!-- dashboard tips -->
				    <div class="tips">
				        <div class="tips-title">接口总数</div>
				        <div class="tips-content">
				            <div class="tips-count"><div id="face_item_count">0</div></div>
				        </div>
				    </div>
				    <div class="tips">
                        <div class="tips-title">接口执行总数</div>
                        <div class="tips-count"><div id="face_execute_count">0</div></div>
                    </div>
                    <div class="tips">
                        <div class="tips-title">链路总数</div>
                        <div class="tips-count"><div id="face_link_count">0</div></div>
                    </div>
                    <div class="tips">
                        <div class="tips-title">链路执行总数</div>
                        <div class="tips-count"><div id="face_link_execute_count">0</div></div>
                    </div>
                    <div class="tips">
                        <div class="tips-title">服务监测</div>
                        <div class="tips-content">
                        <#list serverMonitorList as serverMonitor>
                            <div class="tips-server">${serverMonitor.serverName} - ${serverMonitor.serverIp}<span id="server_monitor_${serverMonitor_index}"></span></div>
                        </#list>
                        <input id="serverMonitorCount" type="hidden" value="${serverMonitorCount}">
                        </div>
                    </div>
                    <!-- <div class="tips">
                        <div class="tips-title">接口实时分析</div>
                        <div class="tips-content"></div>
                    </div>
                    <div class="tips">
                        <div class="tips-title">链路实时分析</div>
                        <div class="tips-content"></div>
                    </div>
                    <div class="tips">
                        <div class="tips-title">实时报告展示</div>
                        <div class="tips-content"></div>
                    </div>
                    <div class="tips">
                        <div class="tips-title">链路调用TOP5</div>
                        <div class="tips-content"></div>
                    </div>
                    <div class="tips">
                        <div class="tips-title">45X实时抓取</div>
                        <div class="tips-content"></div>
                    </div>
                    <div class="tips">
                        <div class="tips-title">45X实时抓取</div>
                        <div class="tips-content"></div>
                    </div>
                    <div class="tips">
                        <div class="tips-title">45X实时抓取</div>
                        <div class="tips-content"></div>
                    </div> -->
				</div>
				 <!-- dashboard tips -->
				 
				 <!-- add project -->
                <div id="project" class="add-module">
                    <div class="project_module_interface_title">添加项目</div>
                    <form id="add-project-form" action="/add_project" method="POST">
                        <input type="text" class="input-text" name="project_name" id="project_name" placeholder="项目名称"/>
                        <input type="text" class="input-text" name="project_remark" placeholder="项目描述"/>
                        <input id="btn-submit-add-porject" type="button" class="button-submit-min" value="提交" onclick="add_project()"/>
                    </form>
                </div>
                <!-- add project -->
				 
				<!-- add module -->
				<div id="module" class="add-module">
				    <div class="project_module_interface_title">添加模块</div>
				    <form id="add-module-form" action="/add_module" method="POST">
				        <select name="project_id" class="input-text">
				            <#list projectList as project>
				            <option value="${project.projectId}">${project.projectName}</option>
				            </#list>
				        </select>
					    <input type="text" class="input-text" name="module_name" id="module_name" placeholder="模块名称"/>
					    <input type="text" class="input-text" name="module_remark" placeholder="模块描述"/>
	                    <input id="btn-submit-add-module" type="button" class="button-submit-min" value="提交" onclick="add_module()"/>
				    </form>
                </div>
                <!-- add module -->
                
                <!-- face list -->
                <div id="face_list" class="add-module">
                    <div id="face_list_module_name" class="module_face_title">接口列表</div>
                    <table id="tb_face_list"></table>
                    <div class="page">
	                    <ul>
	                        <li><a id="firstPage" href="#" onclick="page(1)">首 页</a></li>
	                        <li><a id="previousPage" href="#" onclick="page(2)">上一页</a></li>
	                        <li  style="background:rgb(60,141,186)"><a id="currentPage" href="#"  style="background:rgb(60,141,186);color:white;">1</a></li>
	                        <li><a id="nextPage" href="#" onclick="page(4)">下一页</a></li>
	                        <li><a id="lastPage" href="#" onclick="page(5)">尾 页</a></li>
	                        <li><a id="page_total_record" href="#"></a></li>
	                    </ul>
                    </div>
                    <input type="hidden" value="" id="page_module_id">
                    <input type="hidden" value="" id="total_record">
                </div>
                <!-- face list -->
                
                <!--add interface -->
                <div id="interface" class="add-module">
                    <div id="face_list_module_name" class="project_module_interface_title">添加接口</div>
                    <form id="add-interface-form" action="/add_project" method="POST">
	                    <select name="module_id" id="module_id" class="input-text">
	                        <#list moduleList as module>
	                            <option value="${module.moduleId}">${module.moduleName}</option>
	                        </#list>
	                    </select>
	                    <select name="authentication_id" id="authentication_id" class="input-text">
	                        <#list authenticationList as auth>
	                            <option value="${auth.authenticationId}">${auth.authorizationName}</option>
	                        </#list>
	                    </select>
	                    <input type="text" class="input-text" name="face_name" id="face_name" placeholder="接口名称"/><br/>
	                    
	                    <select name="face_method" class="input-text">
	                        <option value="request_method">请求方法</option>
	                        <option value="GET">GET</option>
	                        <option value="POST" selected="selected">POST</option>
	                        <option value="PUT">PUT</option>
	                        <option value="DELETE">DELETE</option>
	                    </select>
	                    <select name="face_protocol" class="input-text">
	                        <option value="request_protocol">请求协议</option>
	                        <option value="HTTP" selected="selected">HTTP</option>
	                        <option value="HTTPS">HTTPS</option>
	                        <option value="Dubbo">Dubbo</option>
	                        <option value="WebService">WebService</option>
	                    </select>
	                    <select id="face_host" name="face_host" class="input-text">
		                    <#list map?keys as key>
		                      <option value="${key}">${key}</option>
		                      <!-- <option value="${map[key]}">${key}</option> -->
		                    </#list>
	                    </select><br/>
	                    
	                    <input type="text" class="input-text" name="face_url" id="face_url" placeholder="接口地址"/>
	                    <input id="btn-submit-add-module" type="button" class="button-submit-min" value="提交" onclick="add_interface()"/>
	                    <div id="face_body_textarea">
	                        <textarea id="face_body" name="face_body" rows="28" cols="71" spellcheck="false" placeholder="请求体，对数据进行格式化之后再添加。" style="font-size:18px;font-family:Microsoft YaHei;resize:none"></textarea>
	                    </div>
                    </form>
                </div>
                <!-- add interface -->
                
                <!-- display interface -->
                <div id="display_interface" class="add-module">
                    <div id="face_detail" class="project_module_interface_title">接口详情</div>
                    <form id="update-interface-form" action="/update_project" method="POST">
	                    <select id="display_module_id" name="display_module_id" class="input-text">
	                    </select>
	                    <input type="text" class="input-text" id="display_face_name" name="display_face_name" placeholder="接口名称"/>
	                    <input type="hidden" class="input-text" id="display_face_id" name="display_face_id" placeholder="接口ID"/>
	                    <select id="display_auth_name" name="display_auth_name" class="input-text">
                        </select><br/>
	                    <select id="display_face_method" name="display_face_method" class="input-text">
	                    </select>
	                    <select id="display_face_protocol" name="display_face_protocol" class="input-text">
	                    </select>
	                    <select id="display_face_host" name="display_face_host" class="input-text">
                        </select><br/>
	                    <input type="text" class="input-text" id="display_face_url" name="display_face_url" placeholder="接口地址"/>
	                    <input id="btn-submit-find-face" type="button" class="button-submit-min" value="提交" onclick="update_interface()"/>
	                    <div id="face_body_textarea">
	                        <textarea id="display_face_body" spellcheck="false" name="display_face_body" rows="28" cols="71" placeholder="请求体" style="font-size:18px;font-family:Microsoft YaHei;resize:none"></textarea>
	                    </div>
                    </form>
                </div>
                <!-- display interface -->
                
                <!-- add_authorization -->
                <div id="add_authorization_detail" class="add-module">
                    <div id="auth_title" class="project_module_interface_title">添加授权认证</div>
                    <form id="add-authorization-form" action="/add_authorization" method="POST">
	                    <select id="authorization_type" name="authorization_type" class="input-text">
	                        <option value="no_auth">No Auth</option>
	                        <option value="bearer_token">Bearer Token</option>
	                        <option value="basic_auth">Basic Auth</option>
	                        <option value="oauth_authorization_code">OAuth 2.0 授权码模式(authorization code)</option>
	                        <option value="oauth_implicit">OAuth 2.0 简化模式(implicit)</option>
	                        <option value="oauth_password_credentials">OAuth 2.0 密码模式(resource owner password credentials)</option>
	                        <option value="oauth_client_credentials" selected="selected">OAuth 2.0 客户端模式(client credentials)</option>
	                    </select>
	                    <input type="text" class="input-text" id="authorization_name" name="authorization_name" placeholder="起一个有意义的名称吧"/>
	                    <input type="text" class="input-text" id="access_token_url" name="access_token_url" placeholder="Access Token URL"/>
	                    <input type="text" class="input-text" id="username" name="username" placeholder="username or Client ID"/><br/>
	                    <input type="text" class="input-text" id="password" name="password" placeholder="password or Client Secret"/>
	                    <input type="text" class="input-text" id="token" name="token" placeholder="Bearer Token"/>
	                    <input type="text" class="input-text" id="remark" name="remark" placeholder="备注"/>
	                    <input type="button" class="button-submit-min" value="提交" onclick="add_authorization()"/>
                    </form>
                </div>
                <!-- add_authorization -->
                
                <!-- display authentication list -->
                <div id="authentication_list" class="add-module">
                    <div id="authentication_list_name" class="module_face_title">授权认证管理中心</div>
                    <table id="tb_authentication_list"></table>
                </div>
                <!-- display authentication list -->
                
                <!-- global parameter -->
                <div id="add_global_parameter" class="add-module">
                    <div id="global_parameter_title" class="module_face_title">
                        <span>全局参数管理</span>
                        <h4>全局参数分类：用户自定义变量：access_token，调用方式：&#36;{access_token}，系统变量直接使用：&#36;{_uuid}</h4>
                    </div>
                    <form id="global-parameter-form" action="/add_global_parameter" method="POST">
	                    <table id="tb-global-parameter">
		                    <tr>
		                       <th class="th" style="width:45%">参数名</th><th style="width:45%" class="th">参数值</th><th style="width:10%" class="th">操作</th>
		                    </tr>
		                    <tr class="td">
			                    <td class="td"><input type="text" class="input-text-param" id="param_name_1" name="param_name_1" placeholder="参数名"/></td>
			                    <td class="td"><input type="text" class="input-text-param" id="param_name_1" name="param_name_1" placeholder="参数值"/></td>
			                    <td style="text-align: center;"><a href="javascript:void(0)" onclick="delete_parameter(this)">删除</td>
		                    </tr>
	                    </table>
	                    <div class="add-param-btn">
		                    <input id="add_parameter" type="button" class="button-submit-min" value="✚"/>
		                    <input id="submit_parameter" type="button" class="button-submit-min" value="提交"/>
		                </div>
                    </form>
                    <h5>系统变量：&#36;{_uuid}=36位随机字符串、&#36;{_current_time_utc}=UTC零时区时间、&#36;{_current_time_utc_local}=UTC系统时间、&#36;{_current_datetime}=当前时间、&#36;{_current_date}=当前日期、&#36;{_random_number}=0-1亿之间的随机数字</h5>
                </div>
                <!-- global parameter -->
                
                <!-- link test -->
                <div id="add_link_test" class="add-module">
                    <div id="link_title" class="project_module_interface_title">添加测试链路</div>
                    <h4>链路说明：某一个单一的场景称之为一个链路</h4>
                    <h4>网购例子：用户登录(登录接口)➜浏览商品(商品查询接口)➜添加购物车(加入购物车接口)➜提交订单(提交订单接口)➜用户付款(订单结算接口)➜物流信息展示(物流查询接口)，这是一个简单网购链路</h4>
                    <form id="add-link-test-form" action="/add_link" method="POST">
                        <input type="text" class="input-text" id="link_name" name="link_name" placeholder="链路名称"/>
                        <select id="link_face_list" class="input-text">
                            <#list faceList as faceInfo>
                                <option value="${faceInfo.faceId}">${faceInfo.faceName}</option>
                            </#list>
                        </select>
                        <input type="button" class="button-submit-min" value="添加节点" onclick="add_link_node()"/><br/>
                        <h3 style="text-align: center;">接口执行链路图</h3>
                        <div id="link_picture" class="link_picture"></div>
                        <textarea name="link_detail" id="link_detail" rows="8" cols="226" spellcheck="false" placeholder="链路详情描述" style="margin-top:20px;font-family:Microsoft YaHei;resize:none"></textarea>
                        <div class="btn-submit-link"><input type="button" class="button-submit-max" value="提交链路" onclick="add_link()"/></div>
                    </form>
                </div>
                <!-- link test -->
                
                <!-- display link list -->
                <div id="display_link_list" class="add-module">
                    <div id="link_list_name" class="module_face_title">测试链路注册管理中心</div>
                    <table id="tb_link_list"></table>
                    <div class="page">
                        <ul>
                            <li><a id="firstPage" href="#" onclick="findLinkListPage(1)">首 页</a></li>
                            <li><a id="previousPage" href="#" onclick="findLinkListPage(2)">上一页</a></li>
                            <li  style="background:rgb(60,141,186)"><a id="currentPage1" href="#"  style="background:rgb(60,141,186);color:white;">1</a></li>
                            <li><a id="nextPage" href="#" onclick="findLinkListPage(4)">下一页</a></li>
                            <li><a id="lastPage" href="#" onclick="findLinkListPage(5)">尾 页</a></li>
                            <li><a id="page_total_link" href="#"></a></li>
                        </ul>
                    </div>
                    <input type="hidden" value="" id="total_link">
                </div>
                <!-- display link list -->
                
                <!-- add server monitor -->
                <div id="add_server_monitor" class="add-module">
                    <div id="server_monitor_title" class="project_module_interface_title">添加服务监控</div>
                    <form id="add-server-monitor-form" action="/add_server_monitor" method="POST">
                        <input type="text" class="input-text" id="server_name" name="server_name" placeholder="起一个见名知意的服务名称吧"/>
                        <input type="text" class="input-text" id="server_ip" name="server_ip" placeholder="请输入服务的IP或者域名"/>
                        <input type="text" class="input-text" id="remark" name="remark" placeholder="写个备注嘛"/>
                        <input type="button" class="button-submit-min" value="提交" onclick="add_server_monitor()"/>
                    </form>
                </div>
                <!-- add server monitor -->
                
                <!-- env-config -->
                <div class="env-config" id="env-config">
                    <div class="env-config-title">
	                    <span>环境配置</span>
	                    <div id="env-config-title-closed" class="env-config-title-closed">✖</div>
                    </div>
                    <div class="env-config-content">
                         <form id="env-config-form" action="/add_env_config" method="POST">
	                        <table id="tb-env-config">
	                            <tr>
	                               <th class="th" style="width:45%">参数名</th><th style="width:45%" class="th">参数值</th><th style="width:10%" class="th">操作</th>
	                            </tr>
	                            <tr class="td">
	                                <td class="td"><input type="text" class="input-text-param" id="param_name_1" name="param_name_1" placeholder="参数名"/></td>
	                                <td class="td"><input type="text" class="input-text-param" id="param_name_1" name="param_name_1" placeholder="参数值"/></td>
	                                <td style="text-align: center;"><a href="javascript:void(0)" onclick="delete_parameter(this)">删除</td>
	                            </tr>
	                        </table>
	                        <div class="add-param-btn">
	                            <input id="add-config-item" type="button" class="button-submit-min" value="✚"/>
	                            <input id="submit_config" type="button" class="button-submit-min" value="提交"/>
	                        </div>
                        </form>
                    </div>
                </div>
                <!-- env-config -->
                
                <!-- response-body -->
                <div class="response-body" id="response-body">
                    <div class="response-body-title">
                        <span>响应结果</span>
                        <div id="response-body-title-closed" class="response-body-title-closed">✖</div>
                    </div>
                    <!-- <div class="response-body-content" id="response-body-content"></div> -->
                    <textarea rows="20" cols="20" readonly="readonly" class="response-body-content" id="response-body-content"></textarea>
                </div>
                <!-- response-body -->
                
                <!-- about -->
                <div class="about" id="about">
                    <div class="about-title">
                        <span>关于系统</span>
                        <div id="about-title-closed" class="about-title-closed">✖</div>
                    </div>
                    <div class="about-content" id="about-content">
                        <div class="about_logo">FaceMox</div>
                        <div class="about_logo_desc">FaceMox是国内领先的接口测试平台。涵盖接口管理、接口测试、链路测试、服务监测、环境切换、全局参数、授权管理、日志统计、邮件通知、数据分析等众多功能。</div>
                        <div class="about_version">发布版本：FaceMox 2019</div>
                        <div class="about_author">作者信息：</div>
                        <div class="about_author_desc">宋江湖，FaceMox开源项目作者，拥有多年测试、开发经验。</div>
                        <div class="about_author">测试交流：<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=b961373e964ea245024ed99bfde0efefd7399fc0bb78aa681685db24c590d88c"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="FaceMox测试平台交流群(787508910)" title="FaceMox测试平台交流群(787508910)"></a></div>
                        <div class="about_author">项目地址：<a href="https://gitee.com/songjianghu/facemox" target="_blank"><img width=130px src="/img/project_logo.jpg"/></a></div>
                        <div class="about_author">联系邮箱：<a href="mailto:songjianghu@126.com">songjianghu@126.com</a></div>
                        <div class="about_author">官方网站：<a href="https://www.facemox.com" target="_blank">https://www.facemox.com</a></div>
                    </div>
                </div>
                <!-- about -->
				<!-- <div class="right-footer">www.facemox.com</div> -->
			</div>
			<!-- Right Content E -->
			
		</div>
		<!-- Main E -->
		
	</div>
	<script src="/menu/lib/jquery/jquery.min.js"></script>
    <script src="/menu/js/main.js"></script>
    <script src="/js/validation.js"></script>
    <script src="/js/control.js"></script>
    <script src="/js/statistics.js"></script>
</body>
</html>